<template>
  <div class="score-data">
    <div class="tabs-container">
      <div
        v-for="tab in mainTabs"
        :key="tab.value"
        class="tab"
        :class="{ active: activeMainTab === tab.value }"
        @click="activeMainTab = tab.value"
      >
        {{ tab.label }}
      </div>
    </div>

    <div class="sub-tabs">
      <span
        v-for="tab in currentSubTabs"
        :key="tab.value"
        :class="{ active: activeSubTab === tab.value }"
        @click="activeSubTab = tab.value"
      >
        {{ tab.label }}
      </span>
    </div>

    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>球队</th>
          <th>{{ activeMainTab === 'football' ? '胜/平/负' : '胜/负' }}</th>
          <th>积分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(team, index) in displayedTeams" :key="team.name">
          <td>{{ index + 1 }}</td>
          <td>
            <div class="info">
              <img :src="team.teamLogo" alt="">
              <p>{{ team.name }}</p>
              <span v-if="team.league" class="league-tag">{{ team.league }}</span>
            </div>
          </td>
          <td>{{`${team.winNum}/${team.loseNum}/${team.drawNum}`}}</td>
          <td class="score">{{ team.score }}</td>
        </tr>
      </tbody>
    </table>

    <div class="footer">数据更新于{{ updateTime }}</div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, watch, onMounted, reactive} from 'vue'
import {getBasketIntegralRankApi, getFootballIntegralRankApi} from "@/api/home";
import dayjs from "dayjs";

const activeMainTab = ref('football')
const activeSubTab = ref('9')

const mainTabs = [
  { label: '足球积分榜', value: 'football' },
  { label: '篮球积分榜', value: 'basketball' }
]

const footballTabs = [
  { label: '英超', value: '9' },
  { label: '意甲', value: '15' },
  { label: '西甲', value: '3' },
  { label: '德甲', value: '21' },
  { label: '法甲', value: '20' },
  { label: '中超', value: '227' }
]

const basketballTabs = [
  { label: 'NBA', value: '580' },
  { label: 'CBA', value: '673' }
]

let footballTeams = reactive([])

let basketballTeams = reactive([])

const updateTime = ref('2024-09-11 05:00')

const getFootballIntegralRank = () => {
  let leagueId = activeSubTab.value
  let ajax =  activeMainTab.value === 'football' ? getFootballIntegralRankApi : getBasketIntegralRankApi
  ajax({leagueId}).then(res => {
    let data = res.data.list || []
    let promotions = data[0].promotions || []
    let stat = data[0].stat || []
    updateTime.value = formatTime(data.dataUpdateTime)


    let statData = stat.map((item: any) => {
      return {
        name: item.teamName,
        league: promotions.find((p: any) => p.promotionId === item.promotionId)?.promotionCnName || '',
        teamLogo: item.teamLogo,
        ...item
      }
    })

    if (activeMainTab.value === 'football') {
      footballTeams = Object.assign(footballTeams, statData)
    } else {
      basketballTeams = Object.assign(basketballTeams, statData)
    }

  })
}


const currentSubTabs = computed(() =>
  activeMainTab.value === 'football' ? footballTabs : basketballTabs
)

const displayedTeams = computed(() => {
  const teams: any = activeMainTab.value === 'football' ? footballTeams : basketballTeams
  return teams.slice(0, 16)
})

watch(activeMainTab, () => {
  activeSubTab.value = currentSubTabs.value[0].value
})

watch(activeSubTab, () => {
  getFootballIntegralRank()
})

const formatTime = (num: number) => {
  return dayjs(num).format('YYYY-MM-DD HH:mm:ss')
}


onMounted(() => {
  getFootballIntegralRank()
})

</script>

<style lang="scss" scoped>
.score-data {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 30px;
  .tabs-container {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .tab {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      padding: 10px 16px;
      color: #afb8cb;

      &.active {
        color: #16b13a;
      }
    }
  }

  .sub-tabs {
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;

    span {
      padding: 0px 10px 10px 10px;
      cursor: pointer;
      color: #afb8cb;

      &.active {
        border-bottom: 2px solid #16b13a;
        color: #16b13a;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      text-align: left;
      padding: 8px;
      color: #525A79;
    }
    tbody td {
      .info {
        display: flex;
        p {
          width: 70px;
          height: 20px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        img {
          width: 24px;
          height: 24px;
          margin-right: 2px;
        }
      }

    }

    tr:nth-child(even) {
      background-color: #f8f9fa;
    }

    .league-tag {
      background-color: #e6f7ff;
      color: #1890ff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: 8px;
    }

    .score {
      color: #f5222d;
    }
  }

  .footer {
    margin-top: 16px;
    text-align: center;
    color: #999;
    font-size: 12px;
  }
}
</style>
